<template>
  <ve-bmap
    :title="title"
    :settings="chartSettings"
    :tooltip="{}"
    :series="chartSeries"
    height="100%"
  />
</template>

<script>
import { map } from '@/api/axiosHttp'

export default {
  name: 'MapView',
  data () {
    return {
      mapStyle: {},
      scatterData: [],
      title: {
        text: '小萌外卖销售数据大盘',
        subtext: '销售趋势统计',
        left: 'center'
      }
    }
  },
  computed: {
    chartSettings () {
      return {
        key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: false,
          mapStyle: this.mapStyle
        }
      }
    },
    chartSeries () {
      return [
        {
          name: '销售额',
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: this.scatterData,
          encode: {
            value: 2
          },
          itemStyle: {
            color: 'purple'
          },
          symbolSize: function (val) {
            return val[2] / 10
          },
          label: {
            show: false,
            position: 'right',
            formatter: function (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }, {
          name: 'Top 10',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: this.scatterData.slice(0, 10),
          symbolSize: function (val) {
            return val[2] / 10
          },
          encode: {
            value: 2
          },
          label: {
            formatter: function (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            },
            position: 'right',
            show: true
          },
          hoverAnimation: true,
          rippleEffect: {
            brushType: 'stroke'
          },
          itemStyle: {
            color: 'purple',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        }
      ]
    }
  },
  created () {
    map().then(data => {
      const {
        mapStyle,
        scatterData
      } = data
      this.mapStyle = mapStyle
      this.scatterData = scatterData
    })
  }

}
</script>
